<script setup lang="ts">
import { ProductSaveOrUpdateVO } from "@/api/product/types";

const props = defineProps(["modelValue", "isEdit"]);
const productSaleForm = ref(ElForm);
const rules = ref({
  price: [{ required: true, message: "请输入商品价格", trigger: "blur" }],
  num: [{ required: true, message: "请输入商品库存", trigger: "blur" }],
  sellPoint: [{ required: true, message: "请输入商品卖点", trigger: "blur" }],
  priority: [{ required: true, message: "请输入商品排序", trigger: "blur" }],
});
const emits = defineEmits(["prev-step", "finish-commit"]);
const handlePrev = () => {
  emits("prev-step");
};
const productValue = inject("productParam") as Ref<ProductSaveOrUpdateVO>;
const handleFinishCommit = () => {
  // 校验表单
  productSaleForm.value.validate((valid: any) => {
    if (valid) {
      emits("finish-commit", props.isEdit);
    } else {
      ElMessage.warning("请填写完整信息");
      return false;
    }
  });
};
</script>

<template>
  <div style="margin-top: 50px">
    <el-form
      :model="productValue"
      ref="productSaleForm"
      label-width="120px"
      class="form-inner-container"
      size="default"
      :rules="rules"
    >
      <el-form-item label="价格" prop="price">
        <el-input
          v-model.number="productValue.price"
          style="width: 240px"
          placeholder="请输入价格"
          :formatter="
            (val: any) => `¥ ${val}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
          "
          :parser="(val: any) => val.replace(/\¥\s?|(,*)/g, '')"
        />
      </el-form-item>
      <el-form-item label="库存" prop="num">
        <el-input-number
          v-model="productValue.num"
          style="min-width: 240px"
          placeholder="输入正整数"
          :min="1"
          :max="99999"
        />
      </el-form-item>
      <el-form-item label="商品卖点" prop="sellPoint">
        <el-input
          v-model="productValue.sellPoint"
          :autosize="{ minRows: 2, maxRows: 6 }"
          maxlength="150"
          show-word-limit
          type="textarea"
          placeholder="请输入内容"
        />
      </el-form-item>
      <el-form-item label="排序" prop="priority">
        <el-input-number
          v-model="productValue.priority"
          style="min-width: 240px"
          placeholder="输入正整数"
          :min="1"
          :max="100"
        />
      </el-form-item>
      <el-form-item label="商品上架" prop="status">
        <el-switch
          v-model="productValue.status"
          inline-prompt
          :active-value="1"
          :inactive-value="0"
          active-text="是"
          inactive-text="否"
        />
      </el-form-item>
      <el-form-item style="margin-top: 50px; text-align: center">
        <el-button size="default" @click="handlePrev"
          >上一步，填写商品基本信息</el-button
        >
        <el-button type="primary" size="default" @click="handleFinishCommit"
          >完成，提交商品</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped lang="scss">
.form-container {
  width: 960px;
}

.form-inner-container {
  width: 800px;
}
</style>
